﻿@{
    ViewBag.Title = "导购员汇总";
}

@section scripts
{
    <script src="@Url.Content("~/Scripts/shared/share.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/shared/shown.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/common/gridlayout.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/common/export.js")" type="text/javascript"></script>
}
<link href="~/Content/css/style.css?v=1.0.0" rel="stylesheet" />
<script src="~/Scripts/echarts3.min.js"></script>
<script src="~/Scripts/common.js"></script>
<style>
    #myChart {
        width: 100%;
        height: 90%;
    }
</style>
@Html.Partial("~/Views/Modular/ReportsToolbar.cshtml")
<div id="DivHeader">
    <table>
        <tr>
            <td width="70px" height="35px" align="right">门店名称：</td>
            <td width="195px" height="35px">
                @Html.Partial("~/Views/Modular/LookupStockInfo.cshtml")
            </td>
            <td width="70px" height="35px" align="right">统计日期：</td>
            <td width="160px" height="35px">
                <input class="mini-datepicker" name="FDate" format="yyyy-MM-dd" style="width: 107px;" value="" />
            </td>
        </tr>
    </table>
</div>
<div class="mini-splitter" style="width: 100%; height: 90%;">
    <div size="400" showcollapsebutton="true">
        <div class="mini-fit">
            <div id="datagrid1" class="mini-datagrid" style="width: 100%; height: 100%;" pagesize="15"
                borderstyle="border:0;" url="../Report/GetEmployeeSum"
                allowcellselect="true" allowcelledit="true" fitcolumns="false" onload ="SetChartData"
                showSummaryRow="true" ondrawsummarycell="onDrawSummaryCell">
                <div property="columns">
                    <div field="FNumber" name="FNumber" width="100" headeralign="center" allowsort="true">导购员编码</div>
                    <div field="FName" name="FName" width="100" headeralign="center" allowsort="true">导购员名称</div>
                    <div field="FMonthAmount" name="FMonthAmount" width="90" headerAlign="center"align="right" numberFormat="#,0.00">月业绩</div>
                    <div field="FDayAmount" name="FDayAmount" width="90" headerAlign="center"align="right" numberFormat="#,0.00">日业绩</div>                    
                </div>
            </div>
        </div>
    </div>

    <div showcollapsebutton="true">
        <div id="myChart"></div>
    </div>
</div>

<script>
    mini.parse();
    var dataResult;
    var grid = mini.get("datagrid1");
    var sumFields = "FMonthAmount,FDayAmount";

    var myChart = echarts.init(document.getElementById('myChart'));

    var labelOption = {
        normal: {
            show: true,
            position: 'insideBottom',
            distance: 15,
            align: 'left',
            verticalAlign: 'middle',
            rotate: 90,
            formatter: '{c}  {name|{a}}',
            fontSize: 16,
            rich: {
                name: {
                    textBorderColor: '#fff'
                }
            }
        }
    };
    var option = {
        color: ['#2EC7C9', '#5AB1EF'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['日销售额', '月销售额']
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                axisTick: { show: false },
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '日销售额',
                type: 'bar',
                barGap: 0,
                label: labelOption,
                data: []
            },
            {
                name: '月销售额',
                type: 'bar',
                label: labelOption,
                data: []
            }
        ]
    };
    myChart.setOption(option);

    function FormShown() {
        var nowDate = new Date();
        mini.getbyName("FDate").setValue(nowDate);
        LoadData();
    }

    function SetChartData() {
        var names = [];
        var monthAmount = [];
        var dayAmount = [];
        var title = '';
        var rCnt = grid.getData().length;
        for (var i = 0; i < rCnt; i++) {
            var row = grid.getRow(i);
            names.push(row.FName);
            monthAmount.push(row.FMonthAmount);
            dayAmount.push(row.FDayAmount);
        }
        myChart.setOption({
            title: { text: title },
            xAxis: {
                data: names
            },
            series: [{
                data: dayAmount
            }, {
                data: monthAmount
            }]
        });
    }

    function LoadData() {
        var json = "[{";
        json = json + '"mSystemAppID":' + '"' + parent.window.getSystemAppID() + '",';
        json = json + '"mStockID":' + '"' + mini.getbyName("FStockID").getValue() + '",';
        json = json + '"mDateTime":' + '"' + mini.getbyName("FDate").getText() + '"';
        json = json + "}]";

        grid.load({ mydata: json });

        mExportDataUrl = grid.url;
        mExportDataJson = json;
    }

</script>
